﻿<%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>DataGrid</title>
   <script type="text/javascript" src="<%=path %>/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script>
	<link href="<%=path %>/EasyUITest/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="<%=path %>/EasyUITest/themes/icon.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript">
        $(function() {
            $('#test').datagrid({
                title: 'jQuery EasyUI---DataGrid',
                iconCls: 'icon-save',
                width: 500,
                height: 350,
                nowrap: false,
                striped: true,
                url: '<%=path %>/EasyUITest/Data/datagrid_data.json',
                sortName: 'ID',
                sortOrder: 'desc',
                idField: 'ID',
                frozenColumns: [[
	                { field: 'ck', checkbox: true },
	                { title: 'ID', field: 'ID', width: 80, sortable: true }
				]],
                columns: [[
			        { title: '基本信息', colspan: 2 },
					{ field: 'opt', title: '操作', width: 100, align: 'center', rowspan: 2,
					    formatter: function(value, rec) {
					        return '<span style="color:red">编辑 删除</span>';
					    }
					}
				], [
					{ field: 'name', title: 'Name', width: 120 },
					{ field: 'addr', title: 'Address', width: 120, rowspan: 2, sortable: true }
				]],
                pagination: true,
                rownumbers: true,
                singleSelect: false,
                toolbar: [{
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function() {
                    alert('添加数据')
                    }
                }, '-', {
                    text: '保存',
                    iconCls: 'icon-save',
                    handler: function() {
                    alert('保存数据')
                    }
                }]
                });
            });
            
    </script>
</head>
<body>
     <form>
    	用户ID：<input id="userId" name="userInfo.userId" type="text" class="easyui-validatebox" required="true" validType="length[1,3]"/><br/>
    	用户名：<input name="userInfo.userName" type="text"/><br/>
    	密&nbsp;&nbsp;&nbsp;码：<input name="userInfo.password" type="text"/><br>
    	<input id="regRe" type="button" value="注册"/>
    </form>
    <table id="test"></table>
</body>
</html>
